import React, { Component } from 'react'
import {connect} from 'react-redux'
import {Product} from '../types/product'

interface IProps{
    title:string,
    price:number,
    img:any,
    id:number,
    addPro:(target:Product) => void
}

interface IState{
    num:number
}



class ProductItem extends Component <IProps,IState>{
    state = {
        num:1
    }
    render() {
        let {title,price,img,id} = this.props;
        return (
            <div>
                <img src={img} alt=""/>
                <span>{title}</span>
                <span>价格{price}</span>
                <button onClick={this.addProduct}>+</button>
            </div>
        )
    }

    //添加商品
    addProduct = () => {
        let {title,price,img,id} = this.props;
        this.props.addPro({title,price,img,id})
    }
}

let stateMapToProps = (state:any) => {
    return {}
}

let dispatchMapToProps = (dispatch:any) => {
    return {
        addPro(target:Product){
            dispatch({type:'ADD_PRO',target})
        }
    }
}

export default connect(stateMapToProps,dispatchMapToProps)(ProductItem);
